<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="__PUBLIC__/Image/logo.ico">

    <title>义达生态旅游</title>

    <!-- Bootstrap core CSS -->
    <link href="__PUBLIC__/Css/lib/bootstrap.min.css" rel="stylesheet" type="text/css">
    <!-- 自定义公共CSS -->
    <link href="__PUBLIC__/Css/Index/common.css" rel="stylesheet" type="text/css">
    <style type="text/css">
		img{
			height:100%;
		}
		
		.title-alt{
			/* color:white;
			height:30px;
			text-align:center;
			position:absolute;
			left:0px;
			right:0px;
			padding-top:5px;
			opacity:0.6;
			z-index:1000; */
			opacity:0.6;
			bottom:0px;
			display:none;
			height:100%;
			text-align:left;
			padding-left:20px;
			padding-top:20px;
		}
		
		.travelTip-alt{
			color:white;
			height:100%;
			text-align:center;
			position:absolute;
			bottom:0px;
			right:0px;
			top:0px;
			width:0;
			opacity:0.6;
			padding-top:5px;
			z-index:1000;
			display:none;
		}
		
		.trvaelTip-title{
		    width: 1em;
		    font-size: 15px;
		    letter-spacing: 10px;
			float:right;
			display:none;
		}
		
		#carousel{
			height:400px;
		}
		
		.content-img{
			height:250px;
		}
		
		@media screen and (max-height:800px){
			#carousel{
				height:260px;
			}
			
			.content-img{
				height:170px;
			}
			
			.trvaelTip-title{
			    width: 1em;
			    font-size: 12px;
			    letter-spacing: 5px;
				float:right;
				display:none;
			}
		}
	</style>

    <script src="__PUBLIC__/Js/lib/jquery-1.11.2.min.js"></script>
	<script src="__PUBLIC__/Js/lib/bootstrap.min.js"></script>
	<script src="__PUBLIC__/Js/Index/common.js"></script>
	<script type="text/javascript">
		$(function(){
		    $('#myCarousel').carousel({
			  interval: 5000
			}); 
		    // 景点和周边游的标题的显示与隐藏
		    $(".title-alt").each(function(){
		    	$(this).siblings("img").mouseover(function(event){
		    		$(this).siblings(".title-alt").css("display", "block");
			    });
		    	// 鼠标从图片上移开
		    	$(this).siblings("img").mouseout(function(event){
		    		// 鼠标从图片上移动到提示层以外的区域时，隐藏提示层
		    		if(!$(event.relatedTarget).hasClass("title-alt")){
		    			$(this).siblings(".title-alt").css("display", "none");
		    		}
			    	
			    });
		    	// 鼠标从提示层上移开
		    	$(this).mouseout(function(event){
		    		// 鼠标从提示层上移动到该图片以外的区域时，隐藏提示层
		    		if(event.relatedTarget != $(this).siblings("img").get(0)){
		    			$(this).css("display", "none");
		    		}
			    });
		    });
		    // 旅游攻略的内容的显示与隐藏
		    $(".travelTip-alt").siblings("img").mouseover(function(event){
		    	if(!$(event.fromElement).hasClass("travelTip-alt")){
		    		$(this).siblings(".travelTip-alt").animate({"width": "97%"}, "slow");
		    		$(".trvaelTip-title").css("display","block");
	    		}
		    });
		    // 鼠标从图片上移开
		    $(".travelTip-alt").siblings("img").mouseout(function(event){
		    	// 鼠标从图片上移动到提示层以外的区域时，隐藏提示层
	    		if(!$(event.relatedTarget).hasClass("travelTip-alt")){
	    			$(".trvaelTip-title").css("display","none");
	    			$(this).siblings(".travelTip-alt").animate({"width": "0"}, "slow");
	    		}
		    	
		    });
		    // 鼠标从提示层上移开
		    $(".travelTip-alt").mouseout(function(event){
		    	/* // 鼠标从提示层上移动到该图片以外的区域时，隐藏提示层
	    		if(event.relatedTarget != $(".travelTip-alt").siblings("img").get(0)){
	    			$(".trvaelTip-title").css("display","none");
	    			$(this).animate({"width": "0"}, "slow");
	    		} */
	    		if(event.relatedTarget != null){
	    			if(event.relatedTarget.className != "trvaelTip-title"
	 		    	   && event.relatedTarget.className != "travelTip-alt"){
	 	    			$(".trvaelTip-title").css("display","none");
	 	    			$(this).animate({"width": "0"}, "slow");
	 	    		} 
	    		}
		    });
		    
		});
	</script>
  </head>

  <body>
	  <div class="myContainer">
	   <div class="row whole-row" id="carousel" style="">
	      <div id="myCarousel" class="carousel slide col-xs-12 col-sm-12 col-md-12 col-lg-12" style="height:100%;">
		   <!-- 轮播（Carousel）指标 -->
		   <ol class="carousel-indicators" style="bottom:0;">
		   	  <if condition="$advertisementList[0] neq null">
		      	<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
		      </if>
		      <if condition="$advertisementList[1] neq null">
		      	<li data-target="#myCarousel" data-slide-to="1"></li>
		      </if>
		      <if condition="$advertisementList[2] neq null">
		      	<li data-target="#myCarousel" data-slide-to="2"></li>
		      </if>
		      <if condition="$advertisementList[3] neq null">
		      	<li data-target="#myCarousel" data-slide-to="3"></li>
		      </if>
		   </ol>   
		   <!-- 轮播（Carousel）项目 -->
		   <div class="carousel-inner" style="height:100%;">
	   		  <if condition="$advertisementList[0] neq null">
			      <div class="item active" style="height:100%;">
			         <notempty name="advertisementList[0].link_address">
				         <a href="{$advertisementList[0].link_address}">
				         	<img src="__PUBLIC__/Uploads/{$advertisementList[0].img_path}" alt="$advertisementList[0].title" style="height:100%;">
				         </a>
				      <else/>
				      	 <img src="__PUBLIC__/Uploads/{$advertisementList[0].img_path}" alt="$advertisementList[0].title" style="height:100%;">
			         </notempty>
			      </div>
		      </if>
		      <if condition="$advertisementList[1] neq null">
			      <div class="item" style="height:100%;">
			         <notempty name="advertisementList[1].link_address">
				         <a href="{$advertisementList[1].link_address}">
				         	<img src="__PUBLIC__/Uploads/{$advertisementList[1].img_path}" alt="$advertisementList[1].title" style="height:100%;">
				         </a>
				      <else/>
				      	 <img src="__PUBLIC__/Uploads/{$advertisementList[1].img_path}" alt="$advertisementList[1].title" style="height:100%;">
			         </notempty>
			      </div>
		      </if>
		      <if condition="$advertisementList[2] neq null">
			      <div class="item" style="height:100%;">
			         <notempty name="advertisementList[2].link_address">
				         <a href="{$advertisementList[2].link_address}">
				         	<img src="__PUBLIC__/Uploads/{$advertisementList[2].img_path}" alt="$advertisementList[2].title" style="height:100%;"> 
				         </a>
				      <else/>
				      	 <img src="__PUBLIC__/Uploads/{$advertisementList[2].img_path}" alt="$advertisementList[2].title" style="height:100%;">
			         </notempty>
			      </div>
		      </if>
		      <if condition="$advertisementList[3] neq null">
			      <div class="item" style="height:100%;">
			         <notempty name="advertisementList[3].link_address">
				         <a href="{$advertisementList[3].link_address}">
				         	<img src="__PUBLIC__/Uploads/{$advertisementList[3].img_path}" alt="$advertisementList[3].title" style="height:100%;">
				         </a>
				      <else/>
				      	 <img src="__PUBLIC__/Uploads/{$advertisementList[3].img_path}" alt="$advertisementList[3].title" style="height:100%;">
			         </notempty>
			      </div>
		      </if>
		   </div>
		   </div>
	  </div>
	  <div class="row whole-row" style="margin-top:15px;">
	  		<!-- 景点start -->
	  		<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
	  			<div class="row" style="">
	  				<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 content-img" style="padding-right:0;width:60%;">
	  					<if condition="$attractionList[0] neq null">
		  					<a href="{:U('Index/featureSpotDetail')}?id={$attractionList[0].id}">
			  					<img src="__PUBLIC__/Uploads/{$attractionList[0].first_img_path}" alt="{$attractionList[0].name}">
			  					<span class="title-alt" style="background-color:#01ADFF;left:15px;">
			  						<strong>{$attractionList[0].name}</strong>
			  				    </span>
		  				    </a>
	  				    </if>
	  				</div>
	  				<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 content-img" style="padding:0;width:40%;">
	  					<if condition="$attractionList[1] neq null">
		  					<a href="{:U('Index/featureSpotDetail')}?id={$attractionList[1].id}">
			  					<img src="__PUBLIC__/Uploads/{$attractionList[1].first_img_path}" alt="{$attractionList[1].name}">
			  					<span class="title-alt" style="background-color:#01ADFF;">
			  						<strong>{$attractionList[1].name}</strong>
			  				    </span>
		  				    </a>
	  				    </if>
	  				</div>
	  			</div>
	  			<div class="row" style="">
	  				<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 content-img" style="padding-right:0;width:60%;">
	  					<if condition="$attractionList[2] neq null">
		  					<a href="{:U('Index/featureSpotDetail')}?id={$attractionList[2].id}">
			  					<img src="__PUBLIC__/Uploads/{$attractionList[2].first_img_path}" alt="{$attractionList[2].name}">
			  					<span class="title-alt" style="background-color:#01ADFF;left:15px;">
			  						<strong>{$attractionList[2].name}</strong>
			  				    </span>
		  				    </a>
	  				    </if>
	  				</div>
	  				<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 content-img" style="padding:0;width:40%;">
	  					<if condition="$attractionList[3] neq null">
		  					<a href="{:U('Index/featureSpotDetail')}?id={$attractionList[3].id}">
			  					<img src="__PUBLIC__/Uploads/{$attractionList[3].first_img_path}" alt="{$attractionList[3].name}">
			  					<span class="title-alt" style="background-color:#01ADFF;	">
			  						<strong>{$attractionList[3].name}</strong>
			  				    </span>
		  				    </a>
	  				    </if>
	  				</div>
	  			</div>
	  		</div>
	  		<!-- 景点end -->
	  		
      		<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 ">
      			<!-- 周边游start -->
      			<div class="row" style="">
	  				<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 content-img" style="padding-right:0;">
	  					<if condition="$aroundList[0] neq null">
		  					<a href="{:U('Index/aroundDetail')}?id={$aroundList[0].id}">
			  					<img src="__PUBLIC__/Uploads/{$aroundList[0].first_img_path}" alt="{$aroundList[0].name}">
			  					<span class="title-alt" style="background-color:#F29701;left:15px;">
			  						<strong>{$aroundList[0].name}</strong>
			  				    </span>
		  				    </a>
	  				    </if>
	  				</div>
	  				<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 content-img" style="padding-left:0;">
	  				    <if condition="$aroundList[1] neq null">
		  				    <a href="{:U('Index/aroundDetail')}?id={$aroundList[1].id}">
			  					<img src="__PUBLIC__/Uploads/{$aroundList[1].first_img_path}" alt="{$aroundList[1].name}">
			  					<span class="title-alt" style="background-color:#F29701;right:15px;">
			  						<strong>{$aroundList[1].name}</strong>
			  				    </span>
		  				    </a>
	  				    </if>
	  				</div>
	  			</div>
	  			<!-- 周边游end -->
	  			
	  			<!-- 旅游攻略（游记）start -->
	  			<div class="row" style="">
	  				<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 content-img" style="padding-right:0;width:98%;">
	  					<notempty name="travelTip">
		  					<a href="{:U('Index/travelTipDetail')}?id={$travelTip.id}">
			  					<img src="{$travelTip.first_img_path}" alt="{$travelTip.title}">
			  					<span class="travelTip-alt" style="background-color:#E2007E;">
			  						<foreach name="travelTip['about']" item="about_item">
		  								<p class="trvaelTip-title" style="float:right;display:inline;margin-right:5px;height:100%;word-wrap:break-word;word-break:nomal;">{$about_item}</p>
		  							</foreach>
			  				    </span>
		  				    </a>
	  				    </notempty>
	  				</div>
	  			</div>
	  			<!-- 旅游攻略（游记）end -->
      		</div> 
	  </div>
	 </div>
 </body>
</html>
